<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>[[${appName}]] - [[${server}]]</title>
    <link type="text/css" rel="stylesheet" th:href="@{${skinPath} + '/css.css'}"/>
    <style>
        .diff {
            color: red;
        }
        .tr-new {
            background-color: yellow;
        }
        .td-title-empty {
            background-color: #0badc1;
        }
    </style>
    <script th:src="@{/inc/common.js}"></script>
    <script th:src="@{/js/jquery-3.7.1.min.js}"></script>
    <script type="text/javascript" th:src="@{/js/jquery.editinplace.js}"></script>
    <script type="text/javascript" th:src="@{/js/jquery.toaster.js}"></script>
    <script th:src="@{/js/layui/layui.js}" charset="utf-8"></script>
    <link th:href="@{/js/jquery-showLoading/showLoading.css}" rel="stylesheet" media="screen" />
    <script type="text/javascript" th:src="@{/js/jquery-showLoading/jquery.showLoading.js}"></script>
    <link rel="stylesheet" th:href="@{/js/layui/css/layui.css}" media="all">
    <script th:src="@{/js/jquery-alerts/jquery.alerts.js}" type="text/javascript"></script>
    <script th:src="@{/js/jquery-alerts/cws.alerts.js}" type="text/javascript"></script>
    <link th:href="@{/js/jquery-alerts/jquery.alerts.css}" rel="stylesheet" type="text/css" media="screen"/>
</head>
<body>
<div style="text-align:center;margin:20px">
    <input type="button" value="上一步" class="btn btn-default" onclick="window.location.href='tools'"/>&nbsp;&nbsp;
    <strong>请选择数据源</strong>
    <select id="dbSource" name="dbSource">
        <option value="">请选择</option>
        <option th:each="di : ${diInfo}"
                th:value="${di.name}"
                th:selected="${di.isDefault}"
                th:text="${di.name}">
        </option>
    </select>
    <script th:inline="javascript">
        o('dbSource').value = [[${dbSource}]];
    </script>
    <input type="button" value="确定" class="btn btn-default" onclick="window.location.href='dbDict?dbSource=' + o('dbSource').value;"/>
    &nbsp;&nbsp;&nbsp;&nbsp;
    <input id="isShowField" name="isShowField" type="checkbox" th:checked="${isShowField}"/>
    查看字段
    &nbsp;&nbsp;&nbsp;&nbsp;
    <input id="isFilterForm" name="isFilterForm" type="checkbox" th:checked="${isFilterForm}"/>
    过滤表单
    &nbsp;&nbsp;&nbsp;&nbsp;
    <a href="javascript:;" onclick="synAll()">全部同步</a>
    &nbsp;&nbsp;&nbsp;&nbsp;
    <a href="dbDiff">比对数据库差异，本机为新数据库</a>
    <script th:inline="javascript">
        $(function() {
            $('#isShowField').click(function() {
                window.location.href = "dbDict?isFilterForm=" + $('#isFilterForm').prop("checked") + "&isShowField=" + $('#isShowField').prop("checked");
            })

            $('#isFilterForm').click(function() {
                window.location.href = "dbDict?isFilterForm=" + $('#isFilterForm').prop("checked") + "&isShowField=" + $('#isShowField').prop("checked");
            })
        })
    </script>
</div>

<script th:inline="javascript">
    $('#dbSource').val("[(${dbSource})]");
</script>
<div th:each="ta : ${tableInfo}">
    <div th:id="${ta.index}" style="clear:both; margin-left:30px">
        <h3>
            <a th:name="'#'+${ta.tableName}" th:text="${ta.tableName}"></a>
            <span th:id="${ta.tableName}+'_title'" th:class="${ta.isNew}" th:text="${ta.tableTitle}"></span>
            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
            <a href="javascript:;" th:onclick="syn('[(${ta.tableName})]')">同步</a>
        </h3>
    </div>
    <script th:inline="javascript">
        var domEditor, enteredText, originalHtml;
        // 该插件会上传值：original_value、update_value
        $('#'+[[${ta.tableName}]]+'_title').editInPlace({
            url: "../datadict/editTableTitle.do",
            params: "ta.tableName=[(${ta.tableName})]",
            saving_text: "保存中...",
            saving_image: "../static/images/loading.gif",
            dataType: "html",
            delegate: {
                shouldOpenEditInPlace: function(dom) {
                    originalHtml = dom.html();
                },
                willCloseEditInPlace: function(dom) {
                    domEditor = dom;
                    enteredText = dom.find(':input').val();
                }
            },
            error: function (obj) {
                alert(JSON.stringify(obj));
            },
            success: function (data) {
                data = $.parseJSON(data);
                $.toaster({
                    "priority": "info",
                    "message": data.msg
                });
                if (data.ret==1) {
                    domEditor.html(enteredText);
                }
                else {
                    domEditor.html(originalHtml);
                }
            }
        });
    </script>

   <th:block th:if="${isShowField}">
    <table th:id="'tabCol_'+${ta.tableName}" align="left" style="width:1000px; margin-left:30px" border="0" class="tabStyle_1">
        <thead>
        <tr >
            <th width="15%">字段</th>
            <th width="25%">名称</th>
            <th width="10%">类型</th>
            <th width="10%">长度</th>
            <th width="10%">默认值</th>
            <th width="10%">允许空</th>
            <th width="10%">自增长</th>
            <th width="10%">注释</th>
        </tr>
        </thead>
        <tbody>
            <tr th:each="column : ${ta.columnInfo}" th:class="${column.clsTr}">
                <td th:text="${column.columnNameToLowerCase}"></td>
                <td th:id="${ta.tableName + '_' + column.columnName + '_title'}"
                    th:class="${column.tdTitleEmpty}"
                    th:text="${column.dbTitle}"></td>
                <td th:text="${column.type}"></td>
                <td th:text="${column.clsSize} + ${column.tipSize}">
                    <span th:text="${column.columnSize}"></span>
                </td>
                    <script th:inline="javascript">
                        // 该插件会上传值：original_value、update_value
                        $('#'+[[${ta.tableName}]]+'_'+[[${column.columnName}]]+'_title').editInPlace({
                            url: "../datadict/editColumnTitle.do",
                            params: "ta.tableName="+[[${ta.tableName}]] + "&columnName=" + [[${column.columnName}]],
                            default_text: "",
                            dataType: "html",
                            error: function (obj) {
                                alert(JSON.stringify(obj));
                            },
                            success: function (data) {
                                data = $.parseJSON(data);
                                $.toaster({
                                    "priority": "info",
                                    "message": data.msg
                                });
                                if (data.ret==1) {
                                    $('#'+[[${ta.tableName}]]+'_'+[[${column.columnName}]]+'_title').removeClass('diff');
                                }
                            }
                        });
                    </script>

                    <td th:text="${column.def}"></td>
                    <td th:text="${column.nullAble}"></td>
                    <td th:text="${column.isAutoIncrement}"></td>
                    <td th:text="${column.remarks}"></td>
            </tr>
        </tbody>
    </table>
</th:block>
</div>
</body>
<style>
    #nav {
        position: absolute;
        width: 300px;
        height: 500px;
        overflow-y: scroll;
    }
    #nav div {
        height: 22px;
    }
    #nav .is-diff  {
        background-color: #ff0000;
    }
</style>
<th:block th:if="${isShowField}">
    <script th:inline="javascript">

        $(function() {
            var strNav = "[(${sbNav})]";
            $('body').append(strNav);
            var topNav = 100; // $('#table1').offset().top;
            var leftNav = 1000 + 50;
            $('#nav').offset({top: topNav, left: leftNav});
        })

        $(window).scroll(function(){
            $('#nav').offset({top: $(document).scrollTop() + 100});
        });

    </script>
</th:block>
<script th:inline="javascript">
    function syn(tableName) {
        layer.confirm('您确定要同步么？', {icon: 3, title: '提示'}, function (r) {
            layer.close();

            if (r) {
                $.ajax({
                    type: "post",
                    url: "../datadict/synTable.do",
                    contentType:"application/x-www-form-urlencoded; charset=iso8859-1",
                    data: {
                        tableName: tableName
                    },
                    dataType: "html",
                    beforeSend: function(XMLHttpRequest){
                        $('body').showLoading();
                    },
                    success: function(data, status){
                        data = $.parseJSON(data);
                        if (data.ret=="0") {
                            layer.msg(data.msg, );
                        }
                        else {
                            layer.msg(data.msg, );
                            if (data.isTableNew) {
                                $('#' + tableName + '_title').html('[名称未填]');
                                $('#' + tableName + '_title').removeClass('diff');
                            }
                            $('#tabCol_' + tableName).find('.diff').removeClass('diff');
                            $('#tabCol_' + tableName).find('.tr-new').removeClass('tr-new');
                        }
                    },
                    complete: function(XMLHttpRequest, status){
                        $('body').hideLoading();
                    },
                    error: function(XMLHttpRequest, textStatus){
                        // 请求出错处理
                        alert(XMLHttpRequest.responseText);
                    }
                });
            }
        });
    }

    function synAll() {
        layer.confirm('您确定要全部同步么？', {icon: 3, title: '提示'}, function (r) {
            layer.close();

            if (r) {
                $.ajax({
                    type: "post",
                    url: "../datadict/synAllTable.do",
                    contentType:"application/x-www-form-urlencoded; charset=iso8859-1",
                    data: {
                        dbSource: [[${dbSource}]]
                    },
                    dataType: "html",
                    beforeSend: function(XMLHttpRequest){
                        $('body').showLoading();
                    },
                    success: function(data, status) {
                        data = $.parseJSON(data);
                        if (data.ret=="0") {
                            layer.msg(data.msg,);
                        }
                        else {
                            layer.msg(data.msg,  function () {
                                window.location.href = "dbDict?dbSource=" + $('#dbSource').val() + "&isFilterForm=" + $('#isFilterForm').prop("checked") + "&isShowField=" + $('#isShowField').prop("checked");;
                            });
                        }
                    },
                    complete: function(XMLHttpRequest, status){
                        $('body').hideLoading();
                    },
                    error: function(XMLHttpRequest, textStatus){
                        // 请求出错处理
                        alert(XMLHttpRequest.responseText);
                    }
                });
            }
        });
    }
</script>
</html>
